<template>
  <div>
    <div class="search_bar" style="z-index: 9999;background: #fff;">
      <div class="search_icon">
        <img :src="search_btn" />
      </div>
      <div class="search_input">
        <form action="javascript:void 0" style="height: 100%;z-index:9999;background: #fff;">
          <input
            type="search"
            placeholder="搜索"
            @keyup.13="tapToSearch"
            style="border: none;width: 100%;padding: 0;height: 100%;z-index: 9999;background: #fff;"
            v-model="key_words"
          />
        </form>
      </div>
    </div>
    <Tabs
      v-model="active"
      color="#454592"
      style="z-index: 9999;position: sticky;top:50px;"
      @click="tabClick"
    >
      <Tab title="综合排序">
        <template #title>
          <div
            style="display: flex;align-items: center;justify-content: center;"
            :style="{color:compreOverlayShow?'#454592':'#333'}"
          >
            综合排序
            <img :src="arrow_up" style="width: 16px;height: 16px;" v-if="compreOverlayShow" />
            <img :src="arrow_down" style="width: 16px;height: 16px;" v-else />
          </div>
        </template>
      </Tab>
      <Tab title="筛选">
        <template #title>
          <div
            style="display: flex;align-items: center;justify-content: center;"
            :style="{color:filterOverlayShow?'#454592':'#333'}"
          >
            筛选
            <img :src="filter_icon" style="width: 13px;height: 13px;margin:0 2px;" />
          </div>
        </template>
      </Tab>
    </Tabs>
    <Overlay
      :show="compreOverlayShow"
      v-if="active==0"
      @click.self="overlayClick"
      style="z-index: 1000"
    >
      <div style="position: fixed;width: 100%;min-height: 330px;background-color: #fff;top:94px;">
        <div style="margin-top:8px;">
          <div
            class="compre_item"
            :style="item.key==sort_key?'background: rgba(69,69,146,0.06)':''"
            @click="compre_click(index)"
            v-for="(item,index) in compre_list"
            :key="item.key"
          >
            <span
              style="margin-left: 20px;font-family: PingFangSC-Regular;font-size: 14px;color: #333333;letter-spacing: 0.26px;text-align: justify;"
            >{{item.value}}</span>
          </div>
        </div>
      </div>
    </Overlay>
    <Overlay
      :show="filterOverlayShow"
      v-if="active==1"
      @click.self="overlayClick"
      :lock-scroll="false"
    >
      <div
        @scroll="console.log('scroll')"
        style="position: fixed;width: 93%;height: 50vh;background-color: #fff;top:94px;padding:20px 20px 0 20px;"
      >
        <vue-scroll :ops="ops">
          <div>
            <div class="title_filter">
              <div class="title_block"></div>
              <div class="title_text">产品</div>
            </div>
            <div class="tag_options">
              <div
                :class="item.selected?'tag_selected':'tag_unselected'"
                v-for="(item,index) in productList"
                :key="index"
                @click="productTagClick(index)"
              >{{item.name}}</div>
            </div>
            <div class="title_filter">
              <div class="title_block"></div>
              <div class="title_text">主题</div>
            </div>
            <div class="tag_options">
              <div
                :class="item.selected?'tag_selected':'tag_unselected'"
                v-for="(item,index) in subjectList"
                :key="index"
                @click="subjectTagClick(index)"
              >{{item.name}}</div>
            </div>
            <div class="title_filter">
              <div class="title_block"></div>
              <div class="title_text">标签</div>
            </div>
            <div class="tag_options">
              <div
                :class="item.selected?'tag_selected':'tag_unselected'"
                v-for="(item,index) in tagList"
                :key="index"
                @click="tagClick(index)"
              >{{item.name}}</div>
            </div>
          </div>
          <div
            style="padding-bottom:20px;bottom: 0;width: 95%;max-height: 76px;display: flex;justify-content: space-between;margin-top:20px;margin-text-outline: 20px;"
          >
            <div class="filter_clear" @click="clear">清除</div>
            <div class="filter_confirm" @click="tapToSearch">查看</div>
          </div>
        </vue-scroll>
      </div>
    </Overlay>
    <div class="content_list">
      <RadioGroup v-model="check">
        <div
          class="content_item"
          v-for="(item,index) in materialList"
          :key="item.id"
          :style="check==item.id?'background: rgba(69,69,146,0.06)':''"
          @click="im_toggle(index)"
        >
          <!--                    <div :class="check==item.id?'item_checked_line':'item_unchecked_line'">-->

          <!--                    </div>-->
          <div class="item_img">
            <img :src="item.img" style="width: 80px;height: 80px" />
          </div>
          <div class="item_text">
            <div class="product_text">2020年6月10日</div>
            <div class="product_descr">{{item.descr}}</div>
            <div class="product_name">
              <div v-if="item.collapse" style="display: flex;flex-wrap: wrap;">
                <div
                  :class="product_select_name.includes(p)?'product_name_text_selected':'product_name_text'"
                  v-for="(p) in item.products"
                  :key="p"
                >{{p}}</div>
              </div>
              <div v-else style="display: flex;flex-wrap: wrap;">
                <div
                  :class="product_select_name.includes(p)?'product_name_text_selected':'product_name_text'"
                  v-for="(p,index) in item.products"
                  :key="p"
                  v-if="index<3"
                >{{p}}</div>
              </div>
              <div style="position: absolute;right:-20px;" @click.stop="toggleCollapse(index)">
                <img :src="arrow_up" style="width: 20px;height: 20px;" v-if="item.collapse" />
                <img :src="arrow_down" style="width: 20px;height: 20px;" v-else />
              </div>
            </div>
          </div>
          <div class="item_check_btn">
            <Radio :name="item.id">
              <template #icon="props">
                <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
              </template>
            </Radio>
          </div>
        </div>
      </RadioGroup>
    </div>
    <infinite-loading @infinite="nextPage" ref="infiniteLoading" :identifier="active">
      <span slot="no-more">
        <span
          style="font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;text-align: justify;line-height: 16px;height: 30px;display: flex;justify-content: center;"
        >没有更多记录</span>
      </span>
      <span
        slot="no-results"
        style="font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;text-align: justify;line-height: 16px;height: 30px;display: flex;justify-content: center;"
      >没有更多记录</span>
    </infinite-loading>
    <div class="bottom_btn" style>
      <div class="btn_cancle" @click="cancel">取消</div>
      <div class="btn_confirm" @click="save()">确定</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import InfiniteLoading from "vue-infinite-loading";
import check_icon from "./img/check.svg";
import uncheck_icon from "./img/uncheck.svg";
import search_btn from "./img/search_btn.svg";
import search_advance from "./img/advance.svg";
import arrow_down from "./img/arrow_down.svg";
import arrow_up from "./img/arrow_up.svg";
import filter_icon from "./img/filter.svg";

import { RadioGroup, Radio, Tab, Tabs, Popup, Icon, Overlay } from "vant";

import {
  getDocumentAll,
  getProductList,
  getTopicList,
  getLabelList,
} from "@api/ihub";
import vuescroll from "vuescroll/dist/vuescroll-slide";

Vue.use(vuescroll);
export default {
  name: "snfContactRadio",
  components: {
    InfiniteLoading,
    Tab,
    Tabs,
    RadioGroup,
    Radio,
    Popup,
    Icon,
    Overlay,
  },
  props: {
    pageNo: Number,
    pageSize: Number,
    loadable: Boolean,
    list: Array,
  },
  data() {
    return {
      compre_list: [
        {
          key: 1,
          value: "综合排序",
        },
        {
          key: 2,
          value: "时间排序",
        },
        {
          key: 3,
          value: "人气排序",
        },
      ],
      btnd: 1,
      result: {},
      active: 0,
      search_btn: search_btn,
      search_advance: search_advance,
      check: "",
      activeIcon: check_icon,
      inactiveIcon: uncheck_icon,
      materialList: [],
      product_select_name: [],
      page: 1,
      size: 10,
      load: true,
      advanceShow: false,
      productList: [],
      tagList: [],
      subjectList: [],
      compreOverlayShow: false,
      filterOverlayShow: false,
      arrow_down: arrow_down,
      arrow_up: arrow_up,
      filter_icon: filter_icon,
      key_words: "",
      sort_key: 1,
      sort_words: "",
      product_select: [],
      tag_select: [],
      theme_select: [],
      ops: {
        vuescroll: {
          mode: "slide",
          sizeStrategy: "percent",
          detectResize: true,
        },
        scrollPanel: {
          initialScrollY: false,
          initialScrollX: false,
          scrollingX: false,
          scrollingY: true,
        },
        rail: {},
        bar: {
          opacity: 0,
        },
      },
    };
  },
  methods: {
    toggleCollapse(index) {
      this.materialList[index].collapse = !this.materialList[index].collapse;
    },
    compre_click(idx) {
      this.sort_key = this.compre_list[idx].key;
      this.sort_words = this.compre_list[idx].value;
      this.getData();
      this.compreOverlayShow = false;
    },
    tabClick(name, title) {
      if (name == 0) {
        this.compreOverlayShow = true;
        this.filterOverlayShow = false;
      }
      if (name == 1) {
        this.compreOverlayShow = false;
        this.filterOverlayShow = true;
      }
    },
    overlayClick() {
      this.compreOverlayShow = false;
      this.filterOverlayShow = false;
    },
    tagClick(index) {
      this.tagList[index].selected = !this.tagList[index].selected;
    },
    subjectTagClick(index) {
      this.subjectList[index].selected = !this.subjectList[index].selected;
    },
    productTagClick(index) {
      this.productList[index].selected = !this.productList[index].selected;
    },
    im_toggle(idx) {
      this.check = this.materialList[idx].id;
    },
    confirm() {
      this.$emit("confirm", result);
    },
    cancel() {
      this.$emit("cancel");
    },
    tapToSearch() {
      if (this.active == 1) {
        this.check = "";
        this.page = 1;
        this.product_select = this.productList
          .filter((item) => item.selected)
          .map((item) => item.id);
        this.product_select_name = this.productList
          .filter((item) => item.selected)
          .map((item) => item.name);
        this.theme_select = this.subjectList
          .filter((item) => item.selected)
          .map((item) => item.id);
        this.tag_select = this.tagList
          .filter((item) => item.selected)
          .map((item) => item.id);
        this.getData();
        this.filterOverlayShow = false;
      }
      if (this.active == 0) {
        this.check = "";
        this.page = 1;
        this.product_select_name = [];
        this.product_select = [];
        this.tag_select = [];
        this.theme_select = [];
        this.getData();
        this.filterOverlayShow = false;
      }
    },
    nextPage($state) {
      if (this.active == 1) {
        this.page++;
        this.getDataPage($state);
      }
      if (this.active == 1) {
        this.page++;
        this.getDataPage($state);
      }
    },
    clear() {
      this.productList.map((item) => (item.selected = false));
      this.tagList.map((item) => (item.selected = false));
      this.subjectList.map((item) => (item.selected = false));
    },
    save() {
      let z = this.materialList.filter((item) => item.id == this.check)[0];
      this.$emit("confirm", {
        id: z.id,
        name: z.descr,
      });
    },
    getData() {
      let param = {
        searchkey: this.key_words,
        sort: "",
        product: "",
        topic: "",
        label: "",
        current_page: 1,
      };
      if (this.active == 0) {
        param.sort = this.sort_words == "综合排序" ? "" : this.sort_words;
        param.product = "";
        param.topic = "";
        param.label = "";
      }
      if (this.active == 1) {
        param.product = this.product_select.join(",");
        param.topic = this.theme_select.join(",");
        param.label = this.tag_select.join(",");
        param.sort = "";
      }
      this.materialList = [];
      getDocumentAll(param).then((res) => {
        res.list.map((item) => {
          this.materialList.push({
            // id: item.material_id,
            id:item.mcode,
            descr: item.material_name,
            collapse: false,
            img: item.material_img,
            products: item.product.split(","),
          });
        });
      });
    },
    getDataPage($state) {
      let param = {
        searchkey: this.key_words,
        sort: "",
        product: "",
        topic: "",
        label: "",
        current_page: this.page,
      };
      if (this.active == 0) {
        param.sort = this.sort_words == "综合排序" ? "" : this.sort_words;
        param.product = "";
        param.topic = "";
        param.label = "";
      }
      if (this.active == 1) {
        param.product = this.product_select.join(",");
        param.topic = this.theme_select.join(",");
        param.label = this.tag_select.join(",");
        param.sort = "";
      }
      getDocumentAll(param).then((res) => {
        if (res.lastPage) {
          $state.complete();
        } else {
          res.list.map((item) => {
            this.materialList.push({
              id: item.mcode,
              descr: item.material_name,
              collapse: false,
              img: item.material_img,
              products: item.product.split(","),
            });
          });
          $state.loaded();
        }
      });
    },
    getProduct() {
      getProductList().then((res) => {
        res.map((item) => {
          this.productList.push({
            id: item.product_id,
            name: item.product_name,
            selected: false,
          });
        });
      });
    },
    getSubject() {
      getTopicList().then((res) => {
        res.map((item) => {
          this.subjectList.push({
            id: item.theme_id,
            name: item.theme_name,
            selected: false,
          });
        });
      });
    },
    getTag() {
      getLabelList().then((res) => {
        res.map((item) => {
          this.tagList.push({
            id: item.tag_id,
            name: item.tag_name,
            selected: false,
          });
        });
      });
    },
  },
  mounted() {
    this.getProduct();
    this.getSubject();
    this.getTag();
    this.getData();
  },
};
</script>

<style scoped>
@import "index.css";
</style>
<style lang="scss" scoped>
/deep/ .van-tabs__line {
  width: 50% !important;
  height: 2px !important;
}

/deep/ .van-overlay {
  z-index: 1000;
}
</style>